<template>
  <div>
    <h2>照片添加</h2>
      <table class="table table-bordered">
        <tbody>
          <tr>
            <td>姓名</td>
            <td><input type="text"></td>
          </tr>
          <tr>
            <td>照片</td>
            <td><input type="file" @change="getimg">
              <img :src="state.img" width="100" height="100">
            </td>
          </tr>
          <tr>
            <td><input type="button" value="增加" @click="ok"></td>
            <td></td>
          </tr>
        </tbody>
      </table>
  </div>
</template>

<script setup lang="ts">

import { reactive, toRefs, onMounted } from 'vue';
import axios from 'axios';
import { useRoute, useRouter } from 'vue-router';

const route = useRoute();
const router = useRouter();

let data:any=reactive({
  state:{
    Name:'',
    img:''
  }
})
let {state}=toRefs(data);

const ok=()=>{  
  let obj={
    Name:state.value.Name,
    img:state.value.img
  }
  axios({
    url:'/api/one/addimg',
    method:'post',
    data:obj
  }).then((res)=>{
    console.log(res)
    if(res.data.data>0){
        alert("成功");
        return;
    }
  }).catch((err)=>{
    console.log(err)
  })
}

const getimg=(e:any)=>{

  let f=new FormData();
  let obj=e.target.files[0];
  f.append('file',obj)

  axios({
    url:'/api/one/upimgs',
    method:'post',
    data:f
  }).then((res)=>{
    console.log(res)
    if(res.data.code==1){
        alert(res.data.msg)
        return;
    }
    if(res.data.code==2){
        alert(res.data.msg)
        return;
    }
      state.value.img="https://localhost:7272"+res.data.data;
  })

}


</script>

<style scoped>

</style>